<%--
  Created by IntelliJ IDEA.
  User: qinfeng
  Date: 2021/10/6
  Time: 14:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:forEach items="${products}" var="c" varStatus="xh">
    <div class="middler-nav-one">
        <div class="nav-one">
            <div class="nav-two">
                <input type="hidden" name="cartId" value="${carts.get(xh.index).cartId}">
                <input type="hidden" name="productId" value="${c.productId}">
                <input type="hidden" name="paraName" value="${carts.get(xh.index).paraName}">
                <input type="checkbox" name="cks" >
            </div>
            <div class="nav-three">
                <img src="${c.picImg}" alt="">
            </div>
            <div class="nav-four">
                <a href="">${carts.get(xh.index).paraName}</a>
            </div>
            <div class="nav-five">
                <a href="">${c.price}元</a>
            </div>
            <div class="nav-six">
                <div class="six-one">
                    <div class="six-one-one" style="cursor: pointer" onclick="reduceNumber(this)"  data-toggle="modal" >-</div>
                    <div class="six-one-two" name="numList">${carts.get(xh.index).num}</div>
                    <div class="six-one-three" style="cursor: pointer" onclick="addCartProduct(this)">+</div>
                </div>
            </div>
            <div class="nav-seven">
                <a href="">${priceList.get(xh.index)}元</a>
            </div>
            <div class="nav-eight">
                <div class="eight-one">
                    <button  type="button"  data-toggle="modal" data-target="#myModal" onclick="addIndex(this)">x</button>
                </div>
            </div>
        </div>
    </div>
</c:forEach>
<script>
    // 这段代码是实现: 全选功能
    var count = 0;
    var checkBoss = document.getElementById("checkBoss");
    var cks = document.getElementsByName("cks");
    //统计购物车商品数
    var selectCount = document.getElementById("totalNumberCart");
    var selectedNumberCount = parseInt(selectCount.innerText);
    //将统计选中个数返回已选择的商品
    var selectedNumber = document.getElementById("selectedNumber");
    function selectAll(obj){
        if(obj.checked){
            for(let i = 0; i < cks.length; i++){
                cks[i].checked = true;
                let productPrice = document.getElementsByClassName("nav-seven");
                totalPrice = 0;
                for(let d = 0; d < cks.length; d++){
                    if(cks[d].checked){
                        // 在获取当前选中的价格
                        let price = productPrice[d].children[0].innerText;
                        subPrice = price.substring(0, price.length - 1);
                        totalPrice += parseInt(subPrice);
                        // 再把选中的价格返回到合计的标签里面
                        let one = document.getElementById("countTotal");
                        one.children[0].innerText = totalPrice;


                        // 当有勾选产品时, 结算变橙色
                        let toSettle = document.getElementById("toSettle");
                        toSettle.removeAttribute("disabled");
                        toSettle.style.backgroundColor = "rgb(255, 106, 0)";
                        toSettle.style.color = "white";
                    }
                }
            }
            count = selectedNumberCount;
        }
        else{
            for(let i = 0; i < cks.length; i++){
                cks[i].checked = false;
                let productPrice = document.getElementsByClassName("nav-seven");
                let price = productPrice[i].children[0].innerText;
                subPrice = price.substring(0, price.length - 1);
                totalPrice -= parseInt(subPrice);
                // 再把选中的价格返回到合计的标签里面
                let one = document.getElementById("countTotal");
                one.children[0].innerText = totalPrice;
            }

            count = 0;
            // 当未有勾选产品时, 结算变灰色
            if(count == 0){
                let toSettle = document.getElementById("toSettle");
                toSettle.setAttribute("disabled", "true");
                toSettle.style.backgroundColor = "rgb(221, 221, 221)";
                toSettle.style.color = "rgb(51, 51, 100)";
            }
        }
        selectedNumber.innerText = count;
    }
    //count统计选中个数


    var totalPrice = 0;
    // 如果选择子标签选择全部的时候, 大的全部标签设置为true
    for(let c = 0; c < cks.length; c++){
        cks[c].onclick = function(){
            if(this.checked == true){
                count += 1;
                // 每次点击选择的时候, 清空一下前面的, 在进行计算
                totalPrice = 0;
                // 先拿出每个价格集合
                let productPrice = document.getElementsByClassName("nav-seven");
                for(let d = 0; d < cks.length; d++){
                    if(cks[d].checked){
                        // 在获取当前选中的价格
                        let price = productPrice[d].children[0].innerText;
                        subPrice = price.substring(0, price.length - 1);
                        totalPrice += parseInt(subPrice);
                        // 再把选中的价格返回到合计的标签里面
                        let one = document.getElementById("countTotal");
                        one.children[0].innerText = totalPrice;



                        // 当有勾选产品时, 结算变橙色
                        let toSettle = document.getElementById("toSettle");
                        toSettle.removeAttribute("disabled");
                        toSettle.style.backgroundColor = "rgb(255, 106, 0)";
                        toSettle.style.color = "white";
                    }
                }
            }
            else{
                count -= 1;

                // 设置一个属性, 这个属性用来记录当前的价格
                this.setAttribute("index", "ok");
                // 先拿出每个价格集合
                let productPrice = document.getElementsByClassName("nav-seven");
                for(let d = 0; d < cks.length; d++){
                    // alert(cks[d].getAttribute("index"))
                    if(cks[d].checked == false && cks[d].getAttribute("index") == "ok"){
                        // 在获取当前选中的价格
                        let price = productPrice[d].children[0].innerText;

                        subPrice = price.substring(0, price.length - 1);
                        // alert(subPrice);
                        totalPrice -= parseInt(subPrice);
                        // alert(to)
                        // 再把选中的价格返回到合计的标签里面
                        let one = document.getElementById("countTotal");
                        one.children[0].innerText = totalPrice;




                        // 当未有勾选产品时, 结算变灰色
                        if(count == 0){
                            let toSettle = document.getElementById("toSettle");
                            toSettle.setAttribute("disabled", "true");
                            toSettle.style.backgroundColor = "rgb(221, 221, 221)";
                            toSettle.style.color = "rgb(51, 51, 100)";
                        }
                    }
                }
                // 记录完毕并且价格删除之后, 需要把当前的属性删掉, 否则会重复删
                this.removeAttribute("index");
            }
            let j = 0;
            for(; j < cks.length; j++){
                if(cks[j].checked == false)
                    break;
            }

            // 如果子标签全部勾选, 那么大的也会进行勾选
            if(j == cks.length)
                checkBoss.checked = true;
            else
                checkBoss.checked = false;


            selectedNumber.innerText = cks.length;


            selectedNumber.innerText = count;

        }
    }


    // 当用户点击要删除商品时, 给这个商品添加标记, 当用户点击确定按钮时, 能查询到该属性是否拥有索引
    function addIndex(obj){
        let superFather = obj.parentElement.parentElement.parentElement.parentElement;
        superFather.setAttribute("index", "true");
    }

    //删除购物车商品操作
    // var dad = document.getElementById("middler_nav");
    var middler_nav = document.getElementById("middler_nav");
    var middler_nav_Child = middler_nav.children[0].children;
    function del(){
        for(let i = 0; i < middler_nav_Child.length; i++){
            if(middler_nav_Child[i].getAttribute("index") == "true"){
                let id = parseInt(document.getElementsByName("cartId")[i].value);
                // alert(11)
                $.post("/mi/cart/deleteCartProduct", {id:id},function () {
                    $("#outer").load("/mi/cart/asynCart")
                });
                middler_nav_Child[i].removeAttribute("index");
                var myModal = document.getElementById("myModal");
                // myModal.style.display = "none";
                $('#myModal').modal('hide');
                // console.log(document.getElementsByName("cartId")[i].value);
            }
        }
    }


    //添加购物车商品个数以及修改价格
    function addCartProduct(obj){
        let divAdd = obj.parentElement.children[1];
        let basePriceDiv = obj.parentElement.parentElement.parentElement.children[3];
        basePrice = basePriceDiv.innerText;

        // 因为价格有个元所以要截取
        subPrice = basePrice.substring(0, basePrice.length - 1);
        let num =  parseInt(divAdd.innerText) + 1;

        // 算出总的价格
        let price = parseInt(subPrice) * num;


        // 再把价格放入小计
        let subtotal = obj.parentElement.parentElement.parentElement.children[5];

        subtotal.removeChild(subtotal.children[0]);

        let aPrice = document.createElement("a");
        aPrice.innerText = price+"元";
        subtotal.appendChild(aPrice);

        //checked为真时, 用户点击+号继续添加
        if(obj.parentElement.parentElement.parentElement.children[0].children[3].checked == true){
            let one = document.getElementById("countTotal");
            totalPrice += parseInt(subPrice);
            // alert(totalPrice)
            one.children[0].innerText = totalPrice;
        }
        divAdd.innerText = num;

    }



    // (-)减少当前商品的数量
    function reduceNumber(obj){
        let divAdd = obj.parentElement.children[1];
        let basePriceDiv = obj.parentElement.parentElement.parentElement.children[3];
        basePrice = basePriceDiv.innerText;

        // 因为价格有个元所以要截取
        subPrice = basePrice.substring(0, basePrice.length - 1);
        let num =  parseInt(divAdd.innerText) - 1;
        let reduceNumberModal = document.getElementById("reduceNumberModal");
        if(num <= 0){
            obj.setAttribute("data-target", "#reduceNumberModal");
            num = 1;
            let indexPrice = parseInt(obj.parentElement.parentElement.parentElement.children[3].children[0].innerText);
            let one = document.getElementById("countTotal");
            totalPrice += indexPrice;
            one.children[0].innerText = totalPrice;
        }else{
            obj.setAttribute("data-target", "");
        }

        // 算出总的价格
        let price = parseInt(subPrice) * num;


        // 再把价格放入小计
        let subtotal = obj.parentElement.parentElement.parentElement.children[5];

        subtotal.removeChild(subtotal.children[0]);

        let aPrice = document.createElement("a");
        aPrice.innerText = price+"元";
        subtotal.appendChild(aPrice);

        //checked为真时, 用户点击-号继续减少
        if(obj.parentElement.parentElement.parentElement.children[0].children[3].checked == true){
            let one = document.getElementById("countTotal");
            totalPrice -= parseInt(subPrice);
            one.children[0].innerText = totalPrice;
        }
        divAdd.innerText = num;
    }

    function sureCantReduce(){
        $('#reduceNumberModal').modal('hide')
    }


    var toSettle = document.getElementById("toSettle");
    toSettle.onclick = function(){
        let cartIdList = document.getElementsByName("productId");//商品的Id, 这里写错了, 注意了
        let numList = document.getElementsByName("numList");
        let paraNameList = document.getElementsByName("paraName")

        let productIds = "";
        let Nums = "";
        let paraList = "";
        for(let i = 0; i < cks.length; i++){
            if(cks[i].checked){
                productIds += ":"+ cartIdList[i].value;
                Nums += ":" + numList[i].innerText.trim();
                paraList += ":" + paraNameList[i].value;
            }
        }

        productIds = productIds.slice(1);
        Nums = Nums.slice(1);
        paraList = paraList.slice(1);

        if(paraList.indexOf("+") != -1)
            paraList = paraList.replaceAll("+", "%2B");
        // alert(paraList)
        window.location = "/mi/cart/goToSettle?productIds="+productIds + "&Nums=" + Nums + "&paraList=" + paraList;
    }
</script>
